<!DOCTYPE html>
<html>

<head>
	<meta charset="utf-8" />
	<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1" />
	<meta name="renderer" content="webkit" />
	<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no" />
	<link rel="icon" />
	<title></title>
	<!--[if lt IE 11
      ]><script>
        window.location.href='/html/ie.html';
      </script><!
    [endif]-->
	<style>
		html,
		body,
		#app {
			/* height: 100%; */
			margin: 0px;
			padding: 0px;
			width: 100vw;
			height: 100vh;
			position: relative;
		}

		.chromeframe {
			margin: 0.2em 0;
			background: #ccc;
			color: #000;
			padding: 0.2em 0;
		}

		#loader-wrapper {
			position: fixed;
			top: 0;
			left: 0;
			width: 100%;
			height: 100%;
			z-index: 999999;
		}

		#loader {
			display: block;
			position: relative;
			left: 50%;
			top: 50%;
			width: 150px;
			height: 150px;
			margin: -75px 0 0 -75px;
			border-radius: 50%;
			border: 3px solid transparent;
			border-top-color: #FFF;
			-webkit-animation: spin 2s linear infinite;
			-ms-animation: spin 2s linear infinite;
			-moz-animation: spin 2s linear infinite;
			-o-animation: spin 2s linear infinite;
			animation: spin 2s linear infinite;
			z-index: 1001;
		}

		#loader:before {
			content: "";
			position: absolute;
			top: 5px;
			left: 5px;
			right: 5px;
			bottom: 5px;
			border-radius: 50%;
			border: 3px solid transparent;
			border-top-color: #FFF;
			-webkit-animation: spin 3s linear infinite;
			-moz-animation: spin 3s linear infinite;
			-o-animation: spin 3s linear infinite;
			-ms-animation: spin 3s linear infinite;
			animation: spin 3s linear infinite;
		}

		#loader:after {
			content: "";
			position: absolute;
			top: 15px;
			left: 15px;
			right: 15px;
			bottom: 15px;
			border-radius: 50%;
			border: 3px solid transparent;
			border-top-color: #FFF;
			-moz-animation: spin 1.5s linear infinite;
			-o-animation: spin 1.5s linear infinite;
			-ms-animation: spin 1.5s linear infinite;
			-webkit-animation: spin 1.5s linear infinite;
			animation: spin 1.5s linear infinite;
		}


		@-webkit-keyframes spin {
			0% {
				-webkit-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				transform: rotate(0deg);
			}

			100% {
				-webkit-transform: rotate(360deg);
				-ms-transform: rotate(360deg);
				transform: rotate(360deg);
			}
		}

		@keyframes spin {
			0% {
				-webkit-transform: rotate(0deg);
				-ms-transform: rotate(0deg);
				transform: rotate(0deg);
			}

			100% {
				-webkit-transform: rotate(360deg);
				-ms-transform: rotate(360deg);
				transform: rotate(360deg);
			}
		}


		#loader-wrapper .loader-section {
			position: fixed;
			top: 0;
			width: 51%;
			height: 100%;
			background: #7171C6;
			z-index: 1000;
			-webkit-transform: translateX(0);
			-ms-transform: translateX(0);
			transform: translateX(0);
		}

		#loader-wrapper .loader-section.section-left {
			left: 0;
		}

		#loader-wrapper .loader-section.section-right {
			right: 0;
		}


		.loaded #loader-wrapper .loader-section.section-left {
			-webkit-transform: translateX(-100%);
			-ms-transform: translateX(-100%);
			transform: translateX(-100%);
			-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
		}

		.loaded #loader-wrapper .loader-section.section-right {
			-webkit-transform: translateX(100%);
			-ms-transform: translateX(100%);
			transform: translateX(100%);
			-webkit-transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
			transition: all 0.7s 0.3s cubic-bezier(0.645, 0.045, 0.355, 1.000);
		}

		.loaded #loader {
			opacity: 0;
			-webkit-transition: all 0.3s ease-out;
			transition: all 0.3s ease-out;
		}

		.loaded #loader-wrapper {
			visibility: hidden;
			-webkit-transform: translateY(-100%);
			-ms-transform: translateY(-100%);
			transform: translateY(-100%);
			-webkit-transition: all 0.3s 1s ease-out;
			transition: all 0.3s 1s ease-out;
		}

		.no-js #loader-wrapper {
			display: none;
		}

		.no-js h1 {
			color: #222222;
		}

		#loader-wrapper .load_title {
			/* font-family: 'Open Sans';
			color: #333333;
			font-size: 19px;
			width: 100%;
			text-align: center;
			z-index: 9999999999999;
			position: absolute;
			top: 60%;
			opacity: 1;
			line-height: 30px; */

			font-family: PingFang SC;
			font-size: 20px;
			font-weight: normal;
			line-height: 22px;
			text-align: center;
			letter-spacing: 0em;
			font-variation-settings: "opsz" auto;
			color: #333333;
			position: absolute;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
			margin-top: 80px;
		}

		#loader-wrapper .load_title span {
			font-weight: normal;
			font-style: italic;
			font-size: 13px;
			color: #FFF;
			opacity: 0.5;
		}

		.three-body {
			position: absolute;
			top: 48%;
			left: 50%;
			transform: translate(-50%, -50%);
			--uib-size: 50px;
			--uib-speed: 0.8s;
			--uib-color: #3370ff;
			position: relative;
			display: inline-block;
			height: var(--uib-size);
			width: var(--uib-size);
			animation: spin78236 calc(var(--uib-speed) * 2.5) infinite linear;
			margin-left: -25px
		}

		.three-body__dot {
			position: absolute;
			height: 100%;
			width: 30%;
		}

		.three-body__dot:after {
			content: '';
			position: absolute;
			height: 0%;
			width: 100%;
			padding-bottom: 100%;
			background-color: var(--uib-color);
			border-radius: 50%;
		}

		.three-body__dot:nth-child(1) {
			bottom: 5%;
			left: 0;
			transform: rotate(60deg);
			transform-origin: 50% 85%;
		}

		.three-body__dot:nth-child(1)::after {
			bottom: 0;
			left: 0;
			animation: wobble1 var(--uib-speed) infinite ease-in-out;
			animation-delay: calc(var(--uib-speed) * -0.3);
		}

		.three-body__dot:nth-child(2) {
			bottom: 5%;
			right: 0;
			transform: rotate(-60deg);
			transform-origin: 50% 85%;
		}

		.three-body__dot:nth-child(2)::after {
			bottom: 0;
			left: 0;
			animation: wobble1 var(--uib-speed) infinite calc(var(--uib-speed) * -0.15) ease-in-out;
		}

		.three-body__dot:nth-child(3) {
			bottom: -5%;
			left: 0;
			transform: translateX(116.666%);
		}

		.three-body__dot:nth-child(3)::after {
			top: 0;
			left: 0;
			animation: wobble2 var(--uib-speed) infinite ease-in-out;
		}

		@keyframes spin78236 {
			0% {
				transform: rotate(0deg);
			}

			100% {
				transform: rotate(360deg);
			}
		}

		@keyframes wobble1 {

			0%,
			100% {
				transform: translateY(0%) scale(1);
				opacity: 1;
			}

			50% {
				transform: translateY(-66%) scale(0.65);
				opacity: 0.8;
			}
		}

		@keyframes wobble2 {

			0%,
			100% {
				transform: translateY(0%) scale(1);
				opacity: 1;
			}

			50% {
				transform: translateY(66%) scale(0.65);
				opacity: 0.8;
			}
		}
	</style>
	<script src="/static/js/qrcode.min.js"></script>
	<script src="/static/js/flv.min.js"></script>
	<script src="/static/js/dhhls.min.js"></script>
	<script src="/static/js/easyPlayer/EasyPlayer-pro.js"></script>
	<script src="/static/js/demo/h5player.min.js"></script>
</head>

<body>
	<div id="app">
		<div id="loader-wrapper">

			<div class="three-body">
				<div class="three-body__dot"></div>
				<div class="three-body__dot"></div>
				<div class="three-body__dot"></div>
			</div>
			<div class="load_title">正在加载系统资源，请耐心等待</div>

		</div>
		<!-- <div id="loader-wrapper">
			<div id="loader"></div>
			<div class="loader-section section-left"></div>
			<div class="loader-section section-right"></div>
			<div class="load_title">正在加载系统资源，请耐心等待</div>
		</div> -->
	</div>
	<script type="module" src="/src/main.ts"></script>
</body>

</html>
